<style lang="scss">
@import './css/base-color.scss';
body{background: #f7f8fa;}

.v-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #5D6DB1;
    opacity: 0.1;
    z-index: 2006;
}
.m-leftbox{
    position: fixed;
    width: 256px;
    left: 0;
    top: 0;
    z-index: 11;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0px 4px 0px rgba(0,0,0,0.06);
}
.m-rightbox{margin-left: 256px; }
.hd-logo{display: block; background: #fff; height: 60px; color: #fff;text-align: center;padding-top: 20px;border-bottom:1px solid rgba(230,230,230,1)}
.m-ilist{line-height: 48px; color: #3d404d;}
// .m-ilist:hover{background: #f7f8fa;}
.m-imtit{
    margin: 12px 0 0;
    padding: 0 0 0 59px;
    color: #8f95b3;
    line-height:48px;
    font-weight: normal;
}
.m-imtit > i.iconfont{ margin-right:30px;}
.m-imone{padding: 0 0 0 106px;position: relative; cursor: pointer;height: 42px;line-height:42px; color:#7485B1}
.m-imone:hover{background: #F5F6FA;}
.m-imone.current{ background-color: #F5F6FA;}
.m-info{
    background: #fff;
}

.m-info .userInfo {
    height: 80px;
    background: #fff;
    box-shadow:0px 4px 8px 0px rgba(0,0,0,0.06);
    position: relative;
    width: 100%;
    z-index: 9;
}

.crumbsTab {
    width:100%;
    height: 99px;
    position:relative;
    padding-left:131px;
    box-sizing: border-box;
    border-bottom:2px solid rgba(225,231,235,1);
}

.m-inner{
    margin: 0 auto;
    padding:24px 100px 64px;
    // width: 100%;
    box-sizing: border-box;
}

.m-inner .main-cont {
    // background-color:#fff;
    width:100%;
    min-height:100px;
}

.minfo-exit, .minfo-own{ padding: 22px 100px 22px 0; line-height: 36px; color:#45446B; position: relative; }
.minfo-own > .iconfont {
    font-size:12px;
}

.minfo-own em {
    font-style:normal;
    display:inline-block;
    min-width:100px;
    padding-right:46px;
}

.minfo-own .el-submenu__icon-arrow {
    color:#45446B;
    margin-top:-11px;
    font-size:14px;
}

.minfo-exit{width: 88px; border-left: #f1f3f9 solid 1px; text-align: center;cursor: pointer;}
.minfo-exit:hover{background: $mco;color:#fff;}
.minfo-avatar{width: 36px; height: 36px; border-radius: 100%; margin: 0 20px 0 12px; vertical-align: top;}
.m-imtit img{display: inline-block;vertical-align: middle;margin-left: -8px;}
.m-imtit span{display: inline-block;vertical-align: middle; font-size:14px;}
.buy-car-num{position: absolute;left: 103px; font-size: 12px; width: 22px;height: 22px;border-radius: 100%;background: #f00;color: #fff;text-align: center;line-height: 22px;}
/* 重写面包屑  */
.breadcrumb-box{background: #fff; padding-top: 25px; line-height: 20px;}

.el-breadcrumb__inner, .el-breadcrumb__inner a{color: #3d404d;}

.color-main{color:#3f66f6}
.el-input{width: 340px;}
.el-form-item__label{
    padding-right:20px
}
.el-dialog__title{font-weight: bold}
/*表单验证正确边框颜色*/
.el-form-item.is-success .el-input__inner{border-color:#d8dce5;}
.color-orange{color: #ff8c35;}

/*分页样式*/
.el-pagination.is-background .el-pager li{background-color: #fff;}
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{background-color: #fff;}

/*删除弹窗样式*/
.el-message-box{padding-bottom: 20px;}
.el-message-box__header {
    position: relative;
    padding: 40px;
    padding-bottom: 10px;
    text-align: center;
    font-weight: bold;
}
.el-message-box__status + .el-message-box__message {
   padding: 0;
}
.el-icon-warning:before {
    content: "";
}
.el-message-box__message p {
    margin: 0;
    line-height: 24px;
    text-align: center;
}
.el-message-box__btns {
    padding: 20px 0;
    text-align: center;
}
.el-button--small {padding: 12px 40px;font-size: 12px;border-radius: 3px;}
.el-message-box__btns button:nth-child(2) {margin-left: 20px;}
/*webkit内核浏览器滚动条样式更改*/
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-thumb { background-color: #ddd;} /* 滑块颜色 */
/*搜索框按钮样式*/
.el-input-group__append, .el-input-group__prepend{padding: 0 10px;background: #3f66f6;color: #fff;border: 1px solid #3f66f6;}
.no-resource{background: #fff;min-height: 500px;text-align: center;padding-top: 160px;}
.no-word{color: #999;padding: 20px 0 26px;}
.login-box{ width: 100%;height: 100%;position: fixed; top: 0px;bottom: 0px;}
input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.hd-logo > img {
    width:138px;
    height: auto;
}

.plus {
    width: 40px;
    height: 22px;
    border-radius: 20px;
    line-height: 22px;
}
.plus::after {
    content: "+";
    margin-left: 2px;
    font-size: 16px;
}

.el-badge__content.is-fixed {
    position: absolute;
    top: 0;
    right:-10px;
    transform: translateY(50%) translateX(100%);
    background-color:#ff0000;
    border:none;
    border-radius: 50%;
}

.quit {
    width:138px;
    height:50px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.quit .icon.iconfont {
    margin-right:20px;
}

.quit + .popper__arrow {
    left:50%;
}

.el-dropdown-menu.el-popper.main-menu{
    border:none;
    border-radius: 0px;
    box-shadow:-1px 5px 8px 0px rgba(0,0,0,0.06);
    top: 68px !important;
    cursor: pointer;
}

.el-dropdown-menu.el-popper.main-menu .popper__arrow {
    display: none;
}
</style>

<template>
    <div v-if="templateFlag" > <!--class="login-box"-->
        <router-view></router-view>
    </div>

    <div v-else>
        <div class="main clearfix">
            <div class="m-leftbox">
                <a class="hd-logo" href="/">
                    <img src="http://jhsy-img.caizhu.com/Fqi-S0NjW-VdzJEOn98m1XgA6DOI" alt="logo">
                </a>
                <ul class="m-menu">
                    <li class="m-mone" v-for="(outer,index) in routeObj" :key="index">
                        <h6 class="m-imtit" v-html="`${menuImgObj[outer.Code]}<span>${outer.Title}</span>`">

                        </h6>
                        <ul class="m-ilist">
                            <li
                                v-for="(one, $Index) in outer.Children"
                                :key="$Index"
                                class="m-imone"
                                @click="gotoC(one)"
                                :class=" menuRouteObj[one.Code]== currentCode ? 'current':''"
                            >

                                <el-badge :value="buyCarNumFormat" :max="999" class="item" :class="{plus: isShowPlusIcon}" v-if=" buyCarNum > 0 && menuRouteObj[one.Code]=='/resource/buy-car'" >
                                    {{one.Title}}
                                </el-badge>

                                <span v-else>{{one.Title}}</span>
                            </li>
                        </ul>
                    </li>
                </ul>


            </div>

            <div class="m-rightbox">
                <div class="m-info">
                    <!-- 我的信息 -->
                    <div class="userInfo">
                        <div class="minfo-own fr">
                            <span>
                                 <img class="minfo-avatar" v-if="!userInfo.Avatar" src="http://jhsy-img.caizhu.com/sass/images/ic-portrait.png" alt="logo">

                                 <img class="minfo-avatar" v-if="userInfo.Avatar" :src="userInfo.Avatar" alt="">
                            </span>
                            <em>您好，{{userInfo.Username}}</em>
                            <el-dropdown trigger="click" placement="bottom-end">
                                <i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
                                <el-dropdown-menu slot="dropdown" class="main-menu" >
                                    <div class="quit" @click="logOut">
                                        <i class="icon iconfont"></i>
                                        退出
                                    </div>
                                </el-dropdown-menu>
                            </el-dropdown>


                        </div>
                    </div>

                    <!-- 面包屑 -->
                    <div class="crumbsTab" v-if="path.length > 0">
                        <crumbs :path="path" ></crumbs>
                        <tabNav :list="tabs" @setTabCur="getTabCur" v-if="tabs.length > 0" :type="curType"></tabNav>
                    </div>


                </div>
                <div class="m-inner">
                    <router-view @triggerTab="getTab" @ievent="changeCarNum"></router-view>
                    <!--
                    <keep-alive include="effectCreatePaper">
                        <router-view @ievent="changeCarNum" @triggerTab="getTab" v-if="$route.meta.keepAlive"></router-view>
                    </keep-alive>
                    <router-view @triggerTab="getTab" v-if="!$route.meta.keepAlive"></router-view> -->
                </div>
            </div>

        </div>
    </div>

</template>

<script>

    // 一级菜单模板
    import { configuration,  templateArray, firstRouter} from "js/configurationRouter.js"
    import crumbs  from "components/crumbs.vue"
    import tabNav  from "components/tabNav.vue"

    export default {
        name: 'app',
        data: function() {
            return {
                curIndex: '', //一级菜单索引
                cp: '',
                routeObj: [],
                menuRouteObj:{}, //页面路由
                templateArray:"", //页面模板数组
                menuImgObj:{
                    zygl01:'<i class="icon iconfont"></i>',
                    pxxx01:'<i class="icon iconfont"></i>',
                    xgpg01:'<i class="icon iconfont"></i>',
                    tj01:'<i class="icon iconfont"></i>',
                    sz01:'<i class="icon iconfont"></i>'
                },
                templateFlag: false,
                firstIn:true,
                buyCarNum:0,
                userInfo:{}
            }
        },

        components:{
            crumbs,
            tabNav
        },

        computed: {
            buyCarNumFormat(value) {
                return Math.min(this.buyCarNum, 99)
            },
            isShowPlusIcon() {
                return this.buyCarNum > 99
            },

            path() {
                return this.$store.state.path
            },

            currentCode() {
                return this.$store.state.currentCode
            },

            tabs() {
                return this.$store.state.tab
            },

            creentTab() {
                return this.$store.state.tabCur
            },


        },


        methods: {

            changeCarNum(num){
                this.buyCarNum = num;
            },

            //一级路由跳转
            gotoC: function(one){
                if(!one) return ;

                this.$store.commit('setCurrentCode', this.menuRouteObj[one.Code])

                this.$router.push({ path: this.menuRouteObj[one.Code] })
            },

			logOut(){
				axios.get('/com/member/logout').then((res) => {
                   let d = res.data
                   if(d.flag == 1){
                       location.assign('/register/new-login')
                   }else {
                       this.$message.error(d.msg)
                   }
               });
            },

            // 获取需要tab的ID
            getTabCur(arr) {
                this.$store.commit('setTabCur', arr)
            }
        },

        watch: {
            '$route': function(){
                let pathname = location.pathname
                // document.title = this.$route.meta.title || ''

                this.$store.commit('setTab', [])

                firstRouter.indexOf(this.$route.path) > -1  && (this.$store.commit('setCurrentCode', this.$route.path))

                // 根据location地址选择模板
                if( this.templateArray.indexOf(pathname) > -1 ){
                    this.templateFlag = true
                    return false;
                }else{

                    if(this.firstIn){
                        // 获取购物车数量
                        axios.get('/com/orders/getCartNum').then((res) => {
                            var d = res.data;
                            if(d.flag == 1){
                                this.buyCarNum = d.data.CartNum;
                            }else {
                                this.$message.error(d.msg)
                            }
                        })

                        //获取当前登录用户信息
                        axios.get('/com/member/getLoginInfo').then((res) => {
                            var d = res.data;
                            if(d.flag == 1){
                                this.userInfo = d.data;
							}else {
                                this.$message.error(d.msg)
                            }
                        })

                        // 获取菜单信息
                        axios.get('/com/menu/initMenu').then((res) => {
                            var d = res.data;
                            if(d.flag == 1){
                                this.routeObj = d.data.Row
                            }else {
                                this.$message.error(d.msg)
                            }
                        })

                        this.firstIn = false;
                    }
                }

                this.templateFlag = false;
            }
        },


        mounted: function(){
            this.cp = location.pathname;
            this.menuRouteObj = configuration
            this.templateArray = templateArray
        }
    }


    </script>

